<template>
    <div>
        <h1>地址列表</h1>
        <el-table :data="list" style="width: 100%" v-if="bol">
            <el-table-column fixed prop="id" label="id" width="150" />
            <el-table-column prop="name" label="姓名" width="120" />
            <el-table-column prop="area" label="区域" width="120" />
            <el-table-column prop="address" label="地址" width="300" />
            <el-table-column prop="tel" label="电话" width="120" />
            <el-table-column prop="tips" label="备注" width="100" />
            <el-table-column prop="bol" label="默认地址" width="120">
                <template #default="scope">
                <!-- {{ scope.row.bol }} -->
                    <el-button v-if="scope.row.bol==0" link type="primary" size="small" @click="setMo(scope.row.id)">
                        设为默认地址
                    </el-button>
                    <span v-else>默认地址</span>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
                <template #default>
                    <el-button link type="primary" size="small">编辑</el-button>
                    <el-button link type="primary" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>


        <!-- <table v-if="bol" border="1">
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>区域</th>
                <th>详细地址</th>
                <th>手机号</th>
                <th>备注</th>
                <th>是否默认地址</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in list" :key="item.id">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.area }}</td>
                <td>{{ item.address }}</td>
                <td>{{ item.tel }}</td>
                <td>{{ item.tips }}</td>
                <td>{{ item.bol>0?'默认地址':'非默认' }}</td>
                <td>
                    <button>编辑</button>
                    <button @click="shan(index)">删除</button>
                </td>
            </tr>
        </table> -->

        <div v-else>
            <p>还没有地址，<router-link to="/add">新增地址</router-link> </p>
        </div>


        <el-pagination 
            background 
            layout="prev, pager, next" 
            :total="total"
            :page-size="3"
            @current-change="changePage"
        />
    </div>
</template>

<script setup>
import axios from 'axios'
import { ref,reactive,onMounted } from 'vue'

let bol=ref(false);
let list=ref([])

// 设置分页数据
let currPage=ref(1);//设置当前第几页
let currNum=ref(3);//设置一页多少条数据
// 设置总页数
let total=ref(0)

let getTotal=()=>{
    axios.get('/api/getTotal').then(res=>{
        console.log(res.data);
        // 获取总页数
        let num=res.data.data[0]['COUNT(*)']
        total.value=num
    })
}

// 参数page是当前页数，num是当前条数
let getData=(page,num)=>{
    // 请求接口
    axios.get(`/api/getAddress/${page}/${num}`).then(res=>{
        console.log(res.data);
        // 判断返回的数据内容，如果数据长度为0，则返回false，显示空数据状态，否则返回true，显示数据列表
        if(res.data.length){
            bol.value=true;
            list.value=res.data;
        }else{
            bol.value=false;
        }
    })
}

let shan=(index)=>{
    axios.post('/api/del',{id:list.value[index].id}).then(res=>{
        console.log(res.data)
    })
}

onMounted(()=>{
    getData(currPage.value,currNum.value);
    getTotal()
})

// 设置默认地址
let setMo=(id)=>{
    console.log(id);
    // axios.post('/api/mo',{id:id}).then(res=>{
    //     getData();
    // })
    axios.get('/api/mo/'+id).then(res=>{
        getData();
    })
}

// 点击分页
let changePage=(p)=>{
    console.log(p);
    currPage.value=p;
    getData(currPage.value,currNum.value)
}
</script>

<style lang="scss" >

</style>